<template>
  <div class="car-plate-selector" style="display: flex; gap: 8px;">
    <!-- 省份选择 -->
    <el-select v-model="province" placeholder="省份" style="width: 80px;">
      <el-option
        v-for="item in provinces"
        :key="item"
        :label="item"
        :value="item"
      />
    </el-select>

    <!-- 字母选择 -->
    <el-select v-model="letter" placeholder="字母" style="width: 60px;">
      <el-option
        v-for="item in letters"
        :key="item"
        :label="item"
        :value="item"
      />
    </el-select>

    <!-- 数字+字母输入 -->
    <el-input
      v-model="numbers"
      placeholder="输入后续字符"
      maxlength="5"
      style="width: 120px;"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref, watch, defineEmits } from 'vue';
import { ElMessage } from 'element-plus';

const emits = defineEmits<{
  (e: 'update:modelValue', value: string): void
}>();

// 省份列表
const provinces = ['川','京','津','沪','渝','冀','豫','云','辽','黑','湘','皖','鲁','新','苏','浙','赣','鄂','桂','甘','晋','蒙','陕','吉','闽','贵','粤','青','藏','宁','琼'];

// A-Z 字母
const letters = Array.from({ length: 26 }, (_, i) => String.fromCharCode(65 + i));

// 绑定值
const province = ref('');
const letter = ref('');
const numbers = ref('');

// watch 监听值变化，返回完整车牌
watch([province, letter, numbers], () => {
  const plate = `${province.value}${letter.value}${numbers.value}`;
  emits('update:modelValue', plate);
});
</script>
